<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/清楚浏览器默认样式.css">
    <style type="text/css">
    .box1
    {
        /*margin-top: 150px;
        margin-left: auto;
        margin-right:auto;*/
        overflow: auto;
        background-color: blue;
        width: 500px;
        height: 500px;
        /*background-color: rgb(0, 255, 234);*/
        background-image: url("../../HTML-JS资料/伊蕾娜素材EN/img06.jpg");
        background-repeat: no-repeat;
        /*padding: 10px;*/
        background-position:0 0;/*偏移量*/
        /*padding: 10px;*/
        /*
        设置背景的范围
        background-clip
        可选值：
        border-box 默认值，背景会出现在边框的下边（也就是默认不超过上边框和左边框）
        padding-box 背景不会出现在边框，只出现在内容区和内边距(内边距增加的区域也是背景被允许覆盖的区域)
        content-box 背景只会出现在内容区（也就是内边框的增加不会影响背景的覆盖区域）
        前提是图片足够大

        background-origin 背景图片的偏移量计算的原点
        padding-box 默认值，background-position从内边距处开始计算(也就是原点是内边距左上角所在的点)
        content-box 背景图片的偏移量从内容区处计算（内容区的左上角所在的点是原点）
        border-box 背景图片的偏移量从边框处开始计算
        */
        /*background-clip: border-box;*/
        /*background-origin: border-box;*/

        /*
        background-size 背景图片的大小
        第一个值表示宽度 第二个值表示高度
        如果只写一个，则默认第二个值默认是auto（也就是等比例缩放）
        如果要撑满内容区，则两个值都写100%即可

        cover 图片的比例不变，将元素撑满，但是图片不一定显示完全
        contain 图片比例不变，将图片在元素中完整显示
        */
        background-size:contain;
        /*border: 10px red solid;*/
    }
    .box2
    {
        width: 300px;
        height: 1000px;
        /*background-color: orange;*/
        background-image:url("../../HTML-JS资料/伊蕾娜素材EN/j6.jpg");
        background-repeat: no-repeat;
        /*
        background-attachment 背景图片是否跟随元素移动
        可选值
        scroll 默认值 背景图片会跟随元素移动
        fixed 背景会固定在页面中，不会岁元素移动
        */
        background-attachment: fixed;
        /*
        在设置了fixed后，背景图片的定位就会相对于视口左上角原点定位了（当然前提是需要清除浏览器默认样式）
        */
        background-position: 0px 0px;
    }
    /*
    background-color
    background-image
    background-repeat
    background-position
    background-size
    background-origin
    background-clip
    background-attachment
    
    background 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
    如果不是熟悉这个属性的使用，建议还是分开一个一个写
    注意点：
    注意点：
    size的值必须写在position后面（不能单独写size值），而且要用斜杠/  比如 center center/contain
    origin和clip的值是重叠的，但是有顺序要求 origin的值必须写到前面，clip的值必须写到origin后面
    */
    .box3
    {
        border: 10px red double;
        padding: 50px;
        width: 500px;
        height: 500px;
        background: border-box content-box center center/contain #bfa url("../../HTML-JS资料/伊蕾娜素材EN/img06.jpg") no-repeat;
    }
    </style>
</head>
<body>
    <div class="box3"></div>
    <!--
    <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aliquid ut recusandae, et nemo exercitationem ab! Officia ex fugit nobis, sint quia ipsa ea! Culpa, iure? Repudiandae voluptate vel id.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore sequi accusantium quisquam saepe numquam totam nemo illum nesciunt quia dolor reiciendis dolorem vero veniam placeat omnis rem, corporis unde?
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis ullam sit minus totam ab omnis quod dignissimos maiores fugiat eius id odit debitis eaque molestias, delectus consequuntur dolor. Temporibus, nobis?
        </div>
    </div>
    -->
</body>
</html>